<template>
	<div class="contain">
		<u-swiper :list="list" showTitle indicator indicatorMode="line" height="150" circular></u-swiper>
		<view class="boxs">
			<view class="box">
				<view class="circle" @click="toUrl(0)">
					<i class="iconfont">
						&#xe670;</i>
				</view>
				<view class="link" @click="toUrl(0)">
					{{boxs[0].text}}
				</view>
			</view>
			<view class="box">
				<view class="circle" @click="toUrl(1)">
					<i class="iconfont">
						&#xe667;
					</i>
				</view>
				<view class="link" @click="toUrl(1)">
					{{boxs[1].text}}
				</view>
			</view>
			
		</view>
		<view class="information">
			<view class="title">
				教务资讯
			</view>
			<scroll-view scroll-y="true" class="scroll">

				<view v-for="(item,index) in infos" class="item">

					<text @click="toInfo(index)">
						{{item.title}}
					</text>
				</view>
			</scroll-view>

		</view>
		<tabBar :value="0"></tabBar>

	</div>
</template>

<script>
	import tabBar from '@/pages/tabBar.vue'
	import api from '@/api/index.js'; // 引入api
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				list: [{
						"title": "",
						"url": "https://www.xju.edu.cn/images/20201007.jpg"
					},
					{
						"title": "校史馆全景",
						"url": "https://www.xju.edu.cn/images/111111111111.jpg"
					},
					{
						"title": "博达校区",
						"url": "https://www.xju.edu.cn/images/111.jpg"
					}, {
						"title": "红湖东景",
						"url": "https://www.xju.edu.cn/images/_MG_6808_00000.jpg"
					}
				],
				boxs: [{
					"text": "成绩管理",
					"url": "./class",
					"icon": "&#xe670;",
				}, {
					"text": "我的课表",
					"url": "./myclass",
					"icon": "&#xe674;"

				}, {

				}],
				infos: [],
				option: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		components: {
			tabBar
		},
		onLoad() {
			uni.hideTabBar()
			this.checkTeacherToken()


		},
		onShow() {
			let token = uni.getStorageSync("token")
			api.getNoti(token).then(res => {

				if (res.code == 1) {
					this.infos = res.data
					for (let i = 0; i < this.infos.length; i++) {
						this.$set(this.infos[i], "isShow", true)
					}
				} else {
					this.infos = []
				}

			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			...mapMutations(['checkTeacherToken']),
			// toEdit() {
			// 	uni.navigateTo({
			// 		url: '../editor/editor'

			// 	});
			// },
			toUrl(index) {
				uni.navigateTo({
					url: this.boxs[index].url
				})
			},
			toInfo(index) {
				let id = this.infos[index].id
				uni.navigateTo({
					url: "./info?id=" + id
				})
			},
			// deleteInfo(index) {
			// 	console.log("delete" + index)
			// 	let token = uni.getStorageSync("token")

			// 	api.delNotiById(token, this.infos[index].id).then(res => {
			// 		this.infos[index].isShow = false
			// 		console.log(this.infos)


			// 	}).catch(err => {
			// 		console.log(err)
			// 	});

			// }
		}
	}
</script>

<style lang="less">
	.contain {
		.boxs {
			// background-color: #e7e7e7;
			display: flex;
			justify-content: space-around;

			.box {

				@width: calc(680rpx /4);
				width: @width;
				height: calc(@width *1.8);
				margin: 10px 0;

				.circle {
					height: @width;
					line-height: @width;
					text-align: center;
					background-color: #a62618;
					border-radius: 50%;
					color: white;
				}

				.circle:hover {
					// color: #a62618;
					background-color: #9A6E3A;
				}

				.link {
					margin-top: calc(@width *0.2);

					height: calc(@width*0.5);
					line-height: calc(@width*0.5);
					text-align: center;
					width: @width;
					border-radius: 10px;
					background-color: #FFFFFF;
					color: #a62618;
					border: 2px #888888 solid;
				}

				.link:hover {
					// color: #a62618;
					color: #9A6E3A;
				}
			}

		}

		.information {
			@info-height: 45vh;
			height: @info-height;

			.title {

				height: 120rpx;
				background-color: #a62618;
				padding-left: 30rpx;
				color: white;
				line-height: 120rpx;
				font-size: 40rpx;
			}

			.scroll {
				height: calc(@info-height - 70px);
				width: auto;
				// background-color: #eee;
				// border: 2px black solid;
				// background-color: #a6w2618;

				.item {
					margin: 0px;
					background-color: white;
					height: 30px;
					font-size: 30rpx;
					line-height: 30px;

					padding: 10px;
					border-bottom: #a62618 1rpx solid;
					// border-bottom: #a62618 2px solid;
				}
			}

		}
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 50px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
